import React, { Component } from "react";
import * as echarts from "echarts";
import "../../../assets/css/homets2.scss";
export class Top_compontent extends Component {
  componentDidMount(): void {
    this.topCom();
  }
  topCom() {
    const chartDom = document.getElementById("topComs");
    const myChart = echarts.init(chartDom);
    const option = {
      legend: {
        icon: "none",
        textStyle: {
          color: "red",
          align: "center",
        },
      },
      dataset: {
        source: [
          ["product", "2015", "2016", "2017"],
          ["湖北", 4200, 3500, 4100],
          ["江苏", 3200, 2500, 3100],
          ["浙江", 2600, 2100, 2550],
          ["广西", 3400, 2900, 3200],
          ["广东", 6000, 4900, 5800],
          ["重庆", 3900, 3100, 3500],
          ["天津", 3400, 2800, 3000],
          ["上海", 3800, 2500, 3600],
        ],
      },
      yAxis: {
        type: "category",
        axisLabel: {
          interval: 0, // 0 表示强制显示所有标签
        },
      },
      xAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { type: "bar", barWidth: "3px" },
        { type: "bar", barWidth: "3px" },
        { type: "bar", barWidth: "3px" },
      ],
    };
    option && myChart.setOption(option);
  }
  render() {
    return <div id="topComs"></div>;
  }
}

export default Top_compontent;
